<template>
  <a-flex align="center" gap="large" class="home-header">
    <h1>设计表单器</h1>
    <a-input-group compact>
      <a-select v-model:value="baseMode.UImode" size="large">
        <a-select-option
          v-for="item in UIList"
          :key="item.value"
          :value="item.value"
          >{{ item.label }}</a-select-option
        >
      </a-select>
      <a-select v-model:value="baseMode.UIVersion" size="large">
        <a-select-option
          v-for="item in baseMode.UImode ? UIVersionList[baseMode.UImode] : []"
          :key="item.value"
          :value="item.value"
          >{{ item.label }}</a-select-option
        >
      </a-select>
    </a-input-group>
  </a-flex>
</template>
<script setup lang="ts">
import { reactive } from "vue";
// 基础UI库信息
let baseMode = reactive({
  UImode: "ant Design Vue",
  UIVersion: "4.x",
});
// UI库列表
let UIList = reactive([{ label: "Ant Design Vue", value: "ant Design Vue" }]);
// UI库版本列表
let UIVersionList = reactive({
  "ant Design Vue": [
    { label: "1.x", value: "1.x" },
    { label: "4.x", value: "4.x" },
  ],
});
</script>
<style lang="less" scoped>
.home-header {
  border-bottom: 2px dotted #ebeef5;
  h1 {
    font-size: 26px;
    margin: 10px 0;
    line-height: 40px;
  }
  .ant-input-group {
    flex: 1;
    display: flex;
    :deep(.ant-select-selector) {
      min-width: 200px;
    }
  }
}
</style>
